import { useRouter } from "@/i18n";
import { useTranslations } from "next-intl";
import { FC } from "react";
import "./page.scss";

interface Props {}

export function generateStaticParams() {
    return [{ slug: [""] }];
}
const App: FC<Props> = (props) => {
    const t = useTranslations("ReferralsPage");
    const router: any = useRouter();
    const goPage = (path = "") => {
        if (path) {
            if (path === "home") {
                router.replace("/");
                return;
            }

            console.log(router);

            router.replace(`/affiliate/${path}`);
            return;
        }
        router.back();
    };

    return (
        <div className="vux-drawer-referrals">
            <div className="vux-drawer-body" style={{ transform: "translate3d(0px, 0px, 0px)" }}>
                <div
                    className="referral router-view"
                    id="id-router-view"
                    style={{ backgroundColor: "rgb(237, 237, 237)" }}
                >
                    <div className="headerBack">
                        <div className="left" onClick={() => goPage()}>
                            <span className="iconfont icon-xiangzuo1"></span>
                        </div>
                        <span className="title">
                            {t("Afiliado")}
                            <span style={{ fontSize: "0.14rem" }}> - {t("Ganhe")}</span>
                        </span>
                        <span className="right" onClick={() => goPage("home")}>
                            <span className="iconfont icon-home_line router-link-active"></span>
                        </span>
                    </div>
                    <div className="tabs alginLeft van-tabs van-tabs--line">
                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                            <div
                                role="tablist"
                                className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
                            >
                                <div className="van-tab" onClick={() => goPage("summary")}>
                                    <span className="van-tab__text">{t("PAINEL")}</span>
                                </div>
                                <div
                                    className="van-tab van-tab--active"
                                    aria-selected="true"
                                    onClick={() => goPage("referrals")}
                                >
                                    <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
                                </div>
                                <div className="van-tab" onClick={() => goPage("report")}>
                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
                                </div>
                                <div className="van-tab" onClick={() => goPage("payments")}>
                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
                                </div>
                                <div className="van-tab" onClick={() => goPage("faq")}>
                                    <span className="van-tab__text">{t("FAQ")}</span>
                                </div>
                                <div className="van-tab">
                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
                                </div>
                                <div className="van-tabs__line"></div>
                            </div>
                        </div>
                    </div>
                    <div className="content">
                        <div className="referral referral-router-view">
                            <div className="search">
                                <div className="time">
                                    <span className="dateTime"></span>
                                    <div>
                                        <span className="iconfont icon-rili"></span>
                                        <span className="iconfont icon-guanbi"></span>
                                    </div>
                                </div>
                            </div>
                            <ul className="header">
                                <li>
                                    <div>#</div>
                                    <div>{t("Conta")}</div>
                                    <div>
                                        {t("Apostas")}({t("R$")})
                                    </div>
                                    <div>
                                        {t("ApostaEquipe")}({t("R$")})
                                    </div>
                                    <div>{t("Comissão")}</div>
                                </li>
                            </ul>
                            <div role="feed" className="list van-list">
                                <div className="van-list__finished-text">{t("Opa")}</div>
                                <div className="van-list__placeholder"></div>
                            </div>
                            <div className="total">
                                <div>
                                    <span className="num">{t("R$")} 0</span>
                                    <span>{t("Aposta")}</span>
                                </div>
                                <div>
                                    <span className="num">{t("R$")} 0</span>
                                    <span>{t("Comissão")}</span>
                                </div>
                            </div>
                            {/* 日历 */}
                        </div>
                    </div>
                </div>
                <div className="drawer-mask"></div>
            </div>
        </div>
    );
};
export default App;